<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>用户登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<style>
		/* 登录页面样式 */
		.login-page {
			min-height: calc(100vh - 200px);
			background: #f8f9fa;
			padding: 60px 0;
		}
		
		.login-container {
			max-width: 400px;
			margin: 0 auto;
			padding: 0 20px;
		}
		
		.login-card {
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 15px rgba(0,0,0,0.08);
			padding: 40px;
		}
		
		/* 错误提示样式 */
		.error-message {
			background: #fff5f5;
			color: #e53e3e;
			padding: 12px 16px;
			border-radius: 8px;
			margin-bottom: 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			border: 1px solid #fed7d7;
		}
		
		/* 标题样式 */
		.login-title {
			color: #333;
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 30px;
			text-align: center;
		}
		
		/* 表单样式 */
		.form-group {
			margin-bottom: 24px;
		}
		
		.form-label {
			display: block;
			color: #4a5568;
			font-size: 14px;
			font-weight: 500;
			margin-bottom: 8px;
		}
		
		.form-label .required {
			color: #e53e3e;
			margin-left: 4px;
		}
		
		.form-input {
			width: 100%;
			padding: 12px 16px;
			border: 2px solid #e2e8f0;
			border-radius: 8px;
			font-size: 15px;
			color: #2d3748;
			transition: all 0.3s ease;
			background: #fff;
		}
		
		.form-input:focus {
			outline: none;
			border-color: #4CAF50;
			box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
		}
		
		.form-input::placeholder {
			color: #a0aec0;
		}
		
		/* 提交按钮样式 */
		.submit-button {
			width: 100%;
			padding: 14px;
			background: #4CAF50;
			color: white;
			border: none;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
			margin-top: 10px;
		}
		
		.submit-button:hover {
			background: #45a049;
			transform: translateY(-1px);
		}
		
		.submit-button:active {
			transform: translateY(0);
		}
		
		/* 注册链接 */
		.register-link {
			text-align: center;
			margin-top: 20px;
			font-size: 14px;
			color: #718096;
		}
		
		.register-link a {
			color: #4CAF50;
			text-decoration: none;
			font-weight: 500;
			margin-left: 4px;
		}
		
		.register-link a:hover {
			text-decoration: underline;
		}
		
		/* 响应式调整 */
		@media (max-width: 480px) {
			.login-page {
				padding: 40px 0;
			}
			
			.login-card {
				padding: 30px 20px;
			}
			
			.login-title {
				font-size: 22px;
				margin-bottom: 25px;
			}
			
			.form-group {
				margin-bottom: 20px;
			}
			
			.form-input {
				padding: 10px 14px;
				font-size: 14px;
			}
			
			.submit-button {
				padding: 12px;
				font-size: 15px;
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/simpleCart.min.js"></script>
</head>
<body>

	<jsp:include page="header.jsp"/>
	
	<!--account-->
	<div class="login-page">
		<div class="login-container">
			<div class="login-card">
				<c:if test="${msg!=null}">
					<div class="error-message">${msg}</div>
				</c:if>
				<h2 class="login-title">用户登录</h2>
				<form action="login" method="post"> 
					<div class="form-group">
						<label class="form-label">
							用户名
							<span class="required">*</span>
						</label>
						<input type="text" 
							   name="username" 
							   class="form-input" 
							   placeholder="请输入用户名" 
							   required="required">
					</div>
					<div class="form-group">
						<label class="form-label">
							密码
							<span class="required">*</span>
						</label>
						<input type="password" 
							   name="password" 
							   class="form-input" 
							   placeholder="请输入密码" 
							   required="required">
					</div>
					<button type="submit" class="submit-button">登 录</button>
				</form>
				<div class="register-link">
					还没有账号？<a href="register?flag=-1">立即注册</a>
				</div>
			</div>
		</div>
	</div>
	<!--//account-->

	<jsp:include page="footer.jsp"/>
	
</body>
</html>